<template>
	<view>
		<Skeleton v-if="skeletonLoading" type="newsListDetail"></Skeleton>
		<view class="list_wrapper">
			<view class="list_block">
				<view class="title u-skeleton">
					{{ info.title }}
				</view>
				<view class="some u-skeleton">
					<view class="form" :class="info.source == 1 ? 'rep' : ''">
						{{ info.source_text }}
					</view>
					<view class="time">{{ info.addtime | timeFilter }}</view>
					<view class="num">{{ info.click }}</view>
					<view class="clear"></view>
				</view>
			</view>
			<view class="notice_content u-skeleton-rect">
				<u-parse :html="info.content"></u-parse>
			</view>
		</view>
		<view class="jump_block">
			<view class="jump_content">
				<view class="form_split_10"></view>
				<text class="link prev" v-if="prev !== null" @click="handleClick('prev')">上一篇：{{ prev.title }}</text>
				<text class="link prev" v-else>上一篇： -</text>
				<text class="link next" v-if="next !== null" @click="handleClick('next')">下一篇：{{ next.title }}</text>
				<text class="link next" v-else>下一篇： -</text>
			</view>
		</view>
		<view class="form_split_10"></view>
		<!-- <Subscribe></Subscribe> -->
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import Subscribe from './components/Subscribe'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	import Skeleton from '@/components/Skeleton.vue'
	export default {
		name: 'NoticeShow',
		components: {
			Subscribe,
			Skeleton
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		data() {
			return {
				skeletonLoading: true,
				id: 0,
				info: {},
				prev: {},
				next: {},
			}
		},
		watch: {
			$Route(to, from) {
				this.fetchData()
			},
			id() {
				this.fetchData()
			}
		},
		onLoad(e) {
			this.id = e.id ? e.id : 0
		},
		mounted() {
			// 请求列表数据
			this.fetchData()
		},
		onShareAppMessage() {
			var info = {
				...this.info
			}
			info.imgUrl = this.info.thumb
			return onShareAppMessage({
				url: '/commonViews/NewShow?id=' + this.id,
				alias: "newsshow",
				info: info
			})
		},
		onShareTimeline() {
			var info = {
				...this.info
			}
			info.imgUrl = this.info.thumb
			return onShareTimeline({
				url: '/commonViews/NewShow?id=' + this.id,
				alias: "newsshow",
				info: info
			})
		},
		methods: {
			handleClick(type) {
				if (type == 'prev') {
					let link_url = !this.prev.link_url ? '/commonViews/NewShow?id=' + this.prev.id : this.prev.link_url
					uni.navigateTo({
						url: link_url
					})
				} else if (type == 'next') {
					let link_url = !this.next.link_url ? '/commonViews/NewShow?id=' + this.next.id : this.next.link_url
					uni.navigateTo({
						url: link_url
					})
				}
			},
			fetchData() {
				http
					.get(api.news_show, {
						id: this.id
					})
					.then(res => {
						const {
							info,
							prev,
							next
						} = {
							...res.data.data
						}
						this.info = info
						this.prev = prev
						this.next = next
						let wechatShareInfo = {
							title: this.info.title,
							imgUrl: this.info.thumb
						}
						this.skeletonLoading = false
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jump_block {
		.jump_content {
			.link {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: block;
			}

			.prev {
				padding: 24rpx 34rpx 8rpx;
			}

			.next {
				padding: 8rpx 34rpx 24rpx;
			}

			background-color: #ffffff;
			width: 100%;
		}

		position: relative;
	}

	.notice_content {
		image {
			max-width: 100%;
		}

		line-height: 1.8;
		font-size: 28rpx;
		color: #333333;
		padding: 20rpx 0;
		word-break: break-all;
		overflow: hidden;
	}

	.list_wrapper {
		.list_block {
			.some {
				.form {
					&.rep {
						color: #ff6600;
						background-color: #fff5e8;
					}

					float: left;
					line-height: 32rpx;
					padding: 0 12rpx;
					font-size: 22rpx;
					color: #1787fb;
					border-radius: 6rpx;
					background-color: #e7f3ff;
					margin-right: 20rpx;
				}

				.time {
					float: left;
					padding-left: 34rpx;
					font-size: 24rpx;
					color: #999999;
					height: 32rpx;
					background-image: url($ImgUrl + "com_man_i3.png");
					background-repeat: no-repeat;
					background-position: 0 4rpx;
					background-size: 24rpx;
				}

				.num {
					float: left;
					font-size: 24rpx;
					color: #999999;
					height: 32rpx;
					margin-left: 20rpx;
					background-image: url($ImgUrl + "com_man_ic2.png");
					background-repeat: no-repeat;
					background-position: 0 6rpx;
					background-size: 26rpx 20rpx;
					padding-left: 34rpx;
				}
			}

			.title {
				line-height: 1.6;
				word-break: break-all;
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 14rpx;
				font-weight: bold;
			}

			width: 100%;
			position: relative;
			padding: 26rpx 0;
			display: block;
			border-bottom: 2rpx solid #f3f3f3;
		}

		background-color: #ffffff;
		padding: 0 34rpx;
	}
</style>